<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.red{
	width: 100px;
	height: 100px;
	background: red;
}
.blue{
	width: 200px;
	height: 200px;
	background: blue;
}
		</style>
	</head>
	<body>
		<span>w3c事件处理函数</span>
		<div>"DOM2"级事件定义了两个方法，用于添加事件和删除事件处理程序的操作：
		addEventListener()和removeEventListener()。所有的DOM节点中都包含这两个方法
		并且它们都接受3个参数：事件名、函数、冒泡或捕获的布尔值（true表示捕获，false表示冒泡）。
		window.addEventlistener('load',function(){
			alert('事件处理');
		}，false);
		//好处1不需要我们自定义。不会发生覆盖2可以屏蔽相同的函数 3可以设置冒泡和捕获。
		缺点：ie8之前的浏览器不支持
		</div>
		<div id="box"  style="border: 1px solid rosybrown;">
			测试区域请单击
		</div>
	</body>
	<script>
	//其他浏览器和ie9之后的
/*	window.addEventListener('load',function(){
		var box =document.getElementById('box');
		box.addEventListener('click',toRed,false);
	},false);
	
		function toRed(){
			this.className = 'red';
			this.removeEventListener('click',toRed,false);
			this.addEventListener('click',toBlue,false);
		}
 		 function toBlue(){
  			this.className ='blue';
  			this.removeEventListener('click',toBlue,false);
			this.addEventListener('click',toRed,false);
        }*/
 		 
		//ie8之前的浏览器有自己的函数 attachEvent() detachEvent()接收事件名和函数
		//1： ie只支持冒泡 2 ie添加事件不能屏蔽重复的函数 3ie中的this指向的是windows而不是DOM对象。
		//4在传统事件上，ie是无法接受到event对象的但是使用了attachEvent()却可以
		
		//ie处理写法
		
/*		window.attachEvent('onload',function(){
			var box = document.getElementById('box');
			box.attachEvent('onclick',toBlue);//事件默认名称也不同
		});
			function toRed(){
			var that = window.event.srcElement;
			that.className = 'red';
			that.detachEvent('onclick',toRed);
			that.attachEvent('onclick',toBlue);
			
		}
 		 function toBlue(){
 		 	//this代表window 
 		 	var that = window.event.srcElement;
  			that.className ='blue';
  			that.detachEvent('onclick',toBlue);
			that.attachEvent('onclick',toRed);
        }
		*/
		
		//event对象的获取
/*		windo.attachEvent('onload',function(){
			var box = document.getElementById('box');
			box.onclick =function(event){alert(event);}//传统方法无法获取event
			box.attachEvent('onclick',function(eve){ //这个方法可以
				alert(eve.type);
				alert(eve.srcElement.tagName==box);//true
				alert(window.event.srcElement.tagName==box);//true
			});
		});
		*/
		
		//兼容ie的处理
		
		//添加事件
		function addEvent(obj,type,fn){
			if(obj.addEventListener){
				obj.addEventListener(type,fn,false);
			}else if(obj.attachEvent){
				obj.attachEvent('on'+type,fn);
			}
		}
		//移除事件
		function removeEvent(obj,type,fn){
			if(obj.removeEventListener){
				obj.removeEventListener(type,fn,false);
			}else if(obj.detachEvent){
				obj.detachEvent('on'+type,fn);
			}
		}
		//获取目标事件对象
		function getTarget(eve){
			if(eve.target){//w3c
				return eve.target;
			}else if(window.event.srcElement){//ie
				return window.event.srcElement;
			}
		}
		
		//调用
		addEvent(window,'load',function(){
			var box = document.getElementById('box');
			addEvent(box,'click',toBlue);
		});
		
		
		function toRed(eve){
				var that =getTarget(eve);
				that.className = 'red';
				removeEvent(that,'click',toRed);
  				addEvent(that,'click',toBlue)
			
		}
 			 function toBlue(eve){
 		 	
 		 	var that =getTarget(eve);
  			that.className ='blue';
  			removeEvent(that,'click',toBlue);
  			addEvent(that,'click',toRed)
        }
	</script>
</html>
